<template>
    <div>
        <el-aside :width="mainStore.isCollpase ? '65px' : '200px'">
            <el-menu class="" background-color="#545c64" text-color="#fff" :collapse="mainStore.isCollpase"
                :collapse-transition="false" :default-active="activeMenu">
                <el-menu-item v-for="(item, index) in noChildren()" :index="item.path" :key="item.path"
                    @click="goMenu(item)">
                    <component class="icon" :is="item.icon"></component>
                    <span>{{ item.label }}</span>
                </el-menu-item>
                <el-sub-menu v-for="(item, index) in children()" :index="item.path" :key="index">
                    <template #title>
                        <component class="icon" :is="item.icon"></component>
                        <span>{{ item.label }}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="(sitem, sindex) in item.children" :index="sitem.path" :key="sindex"
                            @click="goMenu(sitem)">
                            <component class="icon" :is="sitem.icon"></component>
                            <span>{{ sitem.label }}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-aside>
    </div>
</template>



<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue'
const { proxy } = getCurrentInstance()
import { useMainStore } from '../store/index.js'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const mainStore = useMainStore()

const activeMenu = computed(() => route.path)
const goMenu = (item) => {
    router.push({
        name: item.name
    })
    mainStore.selectMenu(item)
}

const noChildren = () => {
    return mainStore.menuList.filter(item => !item.children)
}

const children = () => {
    return mainStore.menuList.filter(item => item.children)
}



</script>

<style lang='less' scoped>
.icon {
    width: 18px;
    height: 18px;
}


.el-aside {
    height: 100vh;
    background-color: #545c64;

    .el-menu {
        border-right: 0px;
    }
}
</style>